<template>
	<view>
		<view class="obj-top-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/objBg.png)'}]">
			<cu-custom :isWhiteBack="true" :isBack="true" style="background-color: transparent;">
				<block slot="content">
					<view class="custom-title"></view>
				</block>
			</cu-custom>
		</view>
		<view class="padding-left-32 padding-right-32">
			<view class="obj-content">
				<view class="obj-title">建立数据链接</view>
				<input class="obj-input" placeholder="请输入对方的青牒碳账户数字ID" v-model="uuid"></input>
				<view class="margin-top-48 text-center">
					<button class="cu-btn lj-btn" @click="bindGroup">建立链接</button>
				</view>
				<view class="tj-content">推荐链接</view>
				<view class="tj-list-content" v-for="(item,index) in topList" :key="index">
					<view>
						<view class="left-title">{{item.company_name}}</view>
						<view class="flex align-start justify-start padding-top-24">
							<view>
								<image :src="item.logo" class="img-120"></image>
							</view>
							<view class="padding-left-16 text-sm text-767879">
                                {{item.address}}
							</view>
						</view>
					</view>
					<view class="padding-top-16">
						<view class="lj-btn-line" @click="bind(item.uuid)">链接</view>
					</view>
				</view>
				<view v-if="!topList.length">
					<view class="text-center">
						<view>
							<image src="https://txr001.zthj.net/static/img/background.png" class="lgog-img lgog-imgs"></image>
						</view>
						<view class="padding-top-48 text-black text-lg jqqd">
							暂无数据
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uuid: '',
                topList:[],
				// check: false
			}
		},
		onLoad() {
            this.load()
        },
		methods: {
            load: async function() {
                let res = await this.$api.basicInfoTopList();
                if (!res.code) {
                    this.$u.toast(res.msg);
                    return;
                }
                this.topList = res.data;
            },
			bindGroup:  function() {
				let that = this;
				if (that.uuid == '') {
					that.msg('请输入企业区块链地址！');
					return false;
				}
				// if (!that.check) {
					uni.showModal({
						title: '提醒',
						content: '是否同意绑定该企业并上传数据？',
						success: async function(res) {
							if (res.confirm) {
								let res = await that.$api.bindGroup({
									uuid: that.uuid
								});
								that.$u.toast(res.msg);
								// that.msg();
								// that.check = true;
								// return;
							} else if (res.cancel) {
								// return;
								// console.log('用户点击取消');
							}
						}
					});
				// }
				


			},
            bind:  function(uuid) {
                let that = this;
                // if (!that.check) {
                uni.showModal({
                    title: '提醒',
                    content: '是否同意绑定该企业并上传数据？',
                    success: async function(res) {
                        if (res.confirm) {
                            let res = await that.$api.bindGroup({
                                uuid
                            });
                            that.$u.toast(res.msg);
                            // that.msg();
                            // that.check = true;
                            // return;
                        } else if (res.cancel) {
                            // return;
                            // console.log('用户点击取消');
                        }
                    }
                });
                // }



            }
		}
	}
</script>

<style scoped lang="less">
	.obj-top-content {
		background-size: 100% 100%;
		width: 100%;
		height: 616rpx;
	}
	

	.obj-content {
		background: #FFFFFF;
		border-radius: 48rpx;
		margin-top: -216rpx;
		padding: 48rpx 32rpx;

		.obj-title {
			font-size: 40rpx;
			font-weight: 600;
			color: #010101;
		}

		.obj-desc {
			margin-top: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #767879;
		}

		.obj-input-name {
			margin-top: 48rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #010101;
		}

		.obj-input {
			margin-top: 26rpx;
			padding-left: 24rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 8rpx;
			border: 2rpx solid #D9D9D9;
		}

		.footer {
			padding-top: 400rpx;

			.uncheck-img-class {
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
			}

			.show-text {
				font-size: 24rpx;
				font-weight: 400;
				color: #000000;
				// background-color: rgba(255, 63, 63, 0.2);
				vertical-align: middle;
				margin-left: 12rpx;
			}

			.bd-btn {
				width: 454rpx;
				height: 88rpx;
				background: #24458E;
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 32rpx;
			}
		}
	}

	.lj-btn {
		width: 402rpx;
		height: 88rpx;
		background: #24458E;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.tj-content {
		margin-top: 80rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #010101;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #D9D9D9;
	}

	.tj-list-content {
		padding-top: 48rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

		.left-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #010101;
		}

		.lj-btn-line {
			width: 120rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			background: #fff;
			border-radius: 32rpx;
			font-size: 24rpx;
			font-weight: 600;
			color: #24458E;
			border: 2rpx solid #24458E;
		}
	}
	.lgog-imgs{
		margin-top: 100rpx;
	}
</style>